<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
			body{
				background-color: #f5f5f5;
			}
			.header{
				width: 100%;
				height: 2.25rem;
				background-color: white;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #eaeaea;
				
			}	
			.header p{
				font-size: 0.9rem;
			}
			.content1{
				width: 100%;
				display: flex;
				background-color: white;
				border-bottom: 2px solid #eaeaea;
				margin-top: 0.7rem;
			}
			.content1 p{
				font-size: 0.6rem;
				border-right: 1px solid #f0f0f0;
				padding: 1rem 0;
				margin-left: 1rem;
				padding-right: 1rem;
			}
			.content1 input{
				background-color: white;
				border: none;
				font-size: 0.6rem;
				color: #b1a9b1;
				padding: 1rem 0.6rem;
			}
			.third{
				-justify-content: space-between;
			}
			.third .ri{
				margin-left: 5rem;
				color: red;
				border: none;
				font-size: 14px;
				font-weight: 700;
				letter-spacing: 0.2rem;
			}
			
			.sub{
				height: 2.25rem;
				width: 96%;
				display: flex;
				justify-content: center;
				align-content: center;
				font-size: 0.9rem;
				color: white;
				background-color: #ff3451;
				border: none;
				margin: 0 auto;
				margin-top: 1.4rem;
				border-radius: 4px;
				border: none;
			}
			.pass{
				width: 96%;
				height: 3rem;
				padding-top: 0.9rem;
				display: flex;
				justify-content: space-between;
				color: #999999;
				font-size: 0.7rem;
				-border: 1px solid red;
				margin: 0 auto;
			}
			.main{
				position: relative;
				width: 96%;
				height: 15rem;
				border-top: 1px solid #eaeaea;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				padding-top: 2.4rem;
			}
			.main p{
				position: absolute;
				font-size: 0.6rem;
				top: -0.4rem;
				left: 7rem;
				color: #666;
			}
			.main img{
				width: 2rem;
				height: 2rem;
				margin: 0 auto;
			}
			.footer{
				height: 2.8rem;
				width: 96%;
				background-color: white;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.footer li{
				text-align: center;
				font-size: 0.6rem;
				color: #999;
			}
			marquee{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<img src="images/sub_03.png">
			<p><marquee>马浩岚</marquee></p>
			<img src="images/sub_05.png">
		</div>
		<div class="content1">
			<p>账号</p>
			<input type="text" placeholder="请输入用户名/邮箱/手机号"/>
		</div>
		<div class="content1">
			<p>密码</p>
			<input type="password" placeholder="请输入登录密码"/>
		</div>
		<div class="content1 third">
			<p>验证码</p>
			<input type="text" value="请输入验证码"/>
			<p class="ri">676n</p>
		</div>
		<div class="subm">
			<input type="submit" value="确认登录" class="sub"/>
		</div>
		<div class="pass">
			<p>忘记密码?</p>
			<p>立即注册</p>
		</div>
		<div class="main">
			<p>使用合作网站账号登录</p>
			<img src="img/qq_12.png">
		</div>
		<ul class="footer">
			<li>
				<img src="img/footer_15.png">
				<p>首页</p>
			</li>
			<li>
				<img src="img/footer_15.png">
				<p>商城返利</p>
			</li>
			<li>
				<img src="img/footer_15.png">
				<p>优惠爆料</p>
			</li>
			<li>
				<img src="img/footer_15.png">
				<p>超级返利</p>
			</li>
			<li>
				<img src="img/footer_15.png">
				<p>我的</p>
			</li>
		</ul>
		<script>
				window.onresize = window.onload = function() {
					      document.documentElement.style.fontSize = document.documentElement.clientWidth / 414 * 20 + "px";
				}
		</script>
	</body>
</html>
